<div class="form_item_block">
  <label>Password</label>
  <%= scope[:form].hidden_field(com.thoughtworks.go.config.materials.ScmMaterialConfig::ENCRYPTED_PASSWORD, {:class => "form_input encrypted_password"}) -%>
  <div class="password_field">
    <%= password_field_tag("material[password]", '', {:class => "form_input password", :disabled => true}) -%>
    <%= error_message_on(scope[:form].object, com.thoughtworks.go.config.materials.ScmMaterialConfig::PASSWORD, :css_class => "form_error") %>
    <button type="button" id="password_display_toggle" class="hide_password hidden"></button>
  </div>
  <button type="button" id="allow_edit_password" class="change_password">Change password</button>
  <input type="hidden" name="material[<%= com.thoughtworks.go.config.materials.ScmMaterialConfig::PASSWORD_CHANGED -%>]" value="0" id="material_passwordChanged" class="password_changed"/>
</div>

<script type="text/javascript">
  var passwordEdit         = jQuery("#allow_edit_password");
  var passwordChangedField = jQuery("#material_passwordChanged");
  var passwordField        = jQuery("#material_<%=com.thoughtworks.go.config.materials.ScmMaterialConfig::PASSWORD -%>");
  var displayToggle        = jQuery("#password_display_toggle");
  Util.on_load(function () {
    passwordField.val("**********");
    passwordEdit.click(function () {
      var value = passwordChangedField.val();
      if (value === "0") {
        passwordChangedField.val("1");
        passwordField.removeAttr("disabled");
        passwordField.val("");
        displayToggle.removeClass("hidden");
        passwordField.focus();
      } else {
        passwordChangedField.val("0");
        passwordField.attr("disabled", true);
        passwordField.val("**********");
        displayToggle.addClass("hidden");
      }
    });

    displayToggle.click(function () {
      if (displayToggle.hasClass("hide_password")) {
        passwordField.get(0).setAttribute('type', 'text');
        displayToggle.removeClass("hide_password");
        displayToggle.addClass("show_password");
      } else {
        passwordField.get(0).setAttribute('type', 'password');
        displayToggle.removeClass("show_password");
        displayToggle.addClass("hide_password");
      }
    });
  });
</script>
